var sw=20,//一个方块的宽度
	sh=20,//一个方块的高度
	tr=30,//行数
	td=30;//列数
	var snake = null,//snake的实例
		food=null,//食物的实例
		game=null;//游戏的实例
	
	//方块构造函数
	function Square(x,y,classname){
		//0,0      0,0
		//20,0      1,0
		//40,0      2,0
		this.x=x*sw;
		this.y=y*sh;
		this.classname = classname;
		this.viewContent=document.createElement('div');//方块对应的dom元素
		this.viewContent.className=this.classname;
		this.parent=document.getElementById("snakeWrap");//方块的父元素
	}
	Square.prototype.create=function(){//创建方块dom并添加到页面里
		this.viewContent.style.position='absolute';
		this.viewContent.style.width=sw + 'px';
		this.viewContent.style.height=sh + 'px';
		this.viewContent.style.left=this.x + 'px';
		this.viewContent.style.top=this.y + 'px';
		this.parent.appendChild(this.viewContent);
		
	};
	Square.prototype.remove=function(){
		this.parent.removeChild(this.viewContent);
	};
	//snake
	function Snake(){
		this.head = null;//存一下蛇头的信息
		this.tail = null;//英 [teɪl] 存一下蛇尾的信息
		this.pos = [];//存蛇身上每个方块的位置 二维数组[0,0]
		this.directionNum={//根据方向键蛇怎么走 用对象表示
			left:{
				x: -1,
				y:0,
				rotate:180 //蛇头旋转的方向
			},
			right:{
				x:1,
				y:0,
				rotate:0
			},
			up:{
				x:0,
				y: -1,
				rotate: -90
			},
			down:{
				x:0,
				y:1,
				rotate:90
			}
		}
	}
	Snake.prototype.init=function(){
		//创建蛇头
		var snakeHead= new Square(2,0,'snakeHead');
		snakeHead.create();
		this.head=snakeHead;//存储蛇头信息
		this.pos.push([2,0]);//把蛇头位置存起来
		//创建蛇身体1
		var snakeBody1= new Square(1,0,'snakeBody');
		snakeBody1.create();
		this.pos.push([1,0]);//把蛇身1位置存起来
		var snakeBody2= new Square(0,0,'snakeBody');
		snakeBody2.create();
		this.pos.push([0,0]);//把蛇身2位置存起来
		this.tail=snakeBody2;
		//组成整体形成链表关系 为每部分添加last next  属性
		snakeHead.last=null;
		snakeHead.next=snakeBody1;
		
		snakeBody1.last=snakeHead;
		snakeBody1.next=snakeBody2;
		
		snakeBody2.last=snakeBody1;
		snakeBody2.next=null;
		//給蛇添加一个属性，用来表示蛇走的方向
		this.direction = this.directionNum.right;//默认蛇向右走
		
		
	};
	
	//蛇头的下个元素是什么，来确定下一步干什么
	
	Snake.prototype.getNextPos=function(){
		var nextPos=[//this.head=snakeHead;存储蛇头信息  this.head=Square实例snakeHead
		//蛇头要向下一个点的坐标
			this.head.x/sw + this.direction.x,
			this.head.y/sh + this.direction.y
		];//this.direction = this.directionNum.left;所以可以取到this.directionNum.left的值

		//下个点是自己   游戏结束
		var selfcollied = false;//是否撞到自己英 [ˈkɒlɪd] adj.被煤烟弄脏的
		this.pos.forEach(function(value){//数组中的每个值对比
			if(value[0]==nextPos[0] && value[1]==nextPos[1]){
				selfcollied = true;
			}
		});
		if(selfcollied){
			this.strategies.die.call(this);
			// console.log('撞到自己');
			return;//加上return函数返回undefined  后面的代码不执行
		}
		//下个点是围墙 游戏结束
		if(nextPos[0]<0 || nextPos[1]<0  || nextPos[0]>td-1  || nextPos[1]>tr-1){
			// console.log('撞墙');
			this.strategies.die.call(this);
			return;
		}
		//下个点是苹果   吃变大
		if(food && food.pos[0]==nextPos[0] && food.pos[1]==nextPos[1]){
			//这个条件成立则蛇头要走的下个点是食物的点
			console.log('撞食物');
			this.strategies.eat.call(this);
			return;
		}
		
		//下个点什么也不是   继续走
		this.strategies.move.call(this);
		
	};
	//处理碰撞的事件英 strategies[ˈstrætədʒɪz] 策略
	Snake.prototype.strategies={
		move:function(format){//用于决定删不删最后一个方块（蛇尾）format参数,传了参数表示eat
			// console.log('move');
			//创建一个新身体（在旧蛇头的位置）
			var newBody=new Square(this.head.x/sw,this.head.y/sh,'snakeBody');
			//更新链表的关系
			newBody.next=this.head.next;
			newBody.next.last=newBody;
			newBody.last=null;
			this.head.remove();//把蛇头去掉
			newBody.create();
			//创建一个新蛇头（蛇头下一个要走的点）
			var newHead=new Square(this.head.x/sw + this.direction.x,this.head.y/sh + this.direction.y,'snakeHead');
			//更新链表关系
			newHead.next=newBody;
			newHead.last=null;
			newBody.last=newHead;
			newHead.viewContent.style.transform="rotate("+ this.direction.rotate +"deg)";
			newHead.create();
			//蛇身上每个方块也要更新位置信息
			this.pos.splice(0,0,[this.head.x/sw + this.direction.x,this.head.y/sh + this.direction.y]);
			this.head=newHead;//更新下新蛇头信息
			if(!format){//如果format值是false 要删除（除了eat之外的操作）
				this.tail.remove();
				this.tail=this.tail.last;
				
				this.pos.pop();
				
			}
			
		},
		eat:function(){
			// console.log('eat');
			this.strategies.move.call(this,true);
			createFood();//循环调用createFood（）改变食物位置
			game.score++;

		},
		die:function(){
			// console.log('die');
			// console.log(this,'5');
			game.over();
		}
		
	};
	
	
	
	snake = new Snake();

	
	//创建食物
	function createFood(){
		//食物小方块的坐标
		var x=null;
		var y=null;
		//循环跳出的条件 true表示在蛇身上  false表示食物不在蛇身上（不循环）
		var include=true;
		while(include){
			x=Math.round(Math.random()*(td-1));
			y=Math.round(Math.random()*(tr-1));
			
			snake.pos.forEach(function(value){
				if(x !=value[0] && y !=value[1]){
					//这个条件成立说明随机出的这个坐标不在蛇身上
					include=false;
				}
			});
		}
		//生成食物
		food = new Square(x,y,'food');
		food.pos=[x,y];//存下食物的坐标 与蛇头下一个点的坐标做对比  看有没有碰到
		console.log(x,y);
		
		var foodDom=document.querySelector('.food');
		console.log(foodDom);
		if(foodDom){console.log(x,y);
			foodDom.style.left=x*sw+'px';
			foodDom.style.top=y*sh+'px';
		}else{
			food.create();
		}
	   
		
	}
	
	
	

	
	
	//游戏逻辑
	function Game(){
		this.timer=null;
		this.score=0;
	}
	Game.prototype.init=function(){
		snake.init();
		// snake.getNextPos();
		createFood();
		document.onkeydown=function(ev){
			//当按下左键是 蛇不能正想右边走
			if(ev.which==37 && snake.direction != snake.directionNum.right){
				snake.direction = snake.directionNum.left;//蛇向左边走
			}else if(ev.which==38 && snake.direction != snake.directionNum.down){
				snake.direction = snake.directionNum.up;
			}else if(ev.which==39 && snake.direction != snake.directionNum.left){
				snake.direction = snake.directionNum.right;
			}else if(ev.which==40 && snake.direction != snake.directionNum.up){
				snake.direction = snake.directionNum.down;
			}
		}
		this.start();
	}
	Game.prototype.start=function(){//开始游戏
	this.timer=setInterval(function(){
		snake.getNextPos();
	},300);
		
	}
	//开始游戏
	game = new Game();
	var startBtn = document.querySelector('.startBtn button');
	startBtn.onclick=function(){
		startBtn.parentNode.style.display='none';
		game.init();
	}
	Game.prototype.over=function(){
		clearInterval(this.timer);
		alert('你的得分'+this.score);
		//游戏回到初始状态
		var snakeWrap=document.querySelector('#snakeWrap');
		snakeWrap.innerHTML='';
		snake=new Snake();
		game=new Game();
		var startBtnWrap=document.querySelector('.startBtn');
			startBtnWrap.style.display='block';
	}
	Game.prototype.paused=function(){
		clearInterval(this.timer);
	}
	var snakeWrap=document.querySelector('#snakeWrap');
	var pauseBtn=document.querySelector('.pauseBtn button');
	snakeWrap.onclick=function(){
		game.paused();
		pauseBtn.parentNode.style.display='block';
	}
	pauseBtn.onclick=function(){
		game.start();
		pauseBtn.parentNode.style.display='none';
	}
	